<template>
  <Draggable
      itemKey="fe_id"
      :list="componentList"
      ghost-class="ghost"
      chosen-class="chosenClass"
      animation="200"
      @change="move"
      @start="start"
  >
    <template #item="{ element,index }">
        <div>
            <div class="py-[6px] flex items-center justify-between flex-item"
                 style="border-bottom: 1px solid rgba(0, 0, 0, 0.06)">
              <div :class="{'active':element.fe_id===activeId}">{{ element.title }}</div>
              <div>
                <a-space size="small">
                  <a-button
                      @click="hiddenItem(element.isHidden,element.fe_id)"
                      :type="element.isHidden?'primary':'text'" :class="{'b-active':element.isHidden}" shape="circle"
                      class="b-item flex items-center justify-center">
                    <Icon icon="EyeInvisibleOutlined"></Icon>
                  </a-button>
                  <a-button
                      @click="lockItem(index)"
                      :type="element.isLocked?'primary':'text'" :class="{'b-active':element.isLocked}" shape="circle"
                      class="b-item flex items-center justify-center">
                    <Icon icon="LockOutlined"></Icon>
                  </a-button>
                </a-space>
              </div>
            </div>
        </div>
    </template>
  </Draggable>
</template>

<script setup>
import {Icon} from "../utils/Icon.js";
import {defineProps, ref} from "vue";
import useQuestion from "../store/question.js";
import {storeToRefs} from "pinia";
import Draggable from "vuedraggable";
let questionStore = useQuestion()
const {activeId,componentList} = storeToRefs(questionStore)
const {item, index} = defineProps({
  item: {
    type: Object,
    default: {}
  },
  index: {
    type: Number,
    default: 0
  }
})
let preVal = ref([])
const move = () => {
  questionStore.addSnapshots({
    type: 'sort',
    data: preVal.value
  })
}
const start = () => {
  preVal.value = JSON.parse(JSON.stringify(componentList.value))
}
const hiddenItem = (isHidden,id) => {
  let preVal = JSON.parse(JSON.stringify(componentList.value))
  questionStore.hiddenItem(!isHidden,id)
  questionStore.addSnapshots({
    type: 'hidden',
    data: preVal,
    activeId: id
  })
}
const lockItem = (index) => {
  let preVal = JSON.parse(JSON.stringify(componentList.value))
  questionStore.updateLock(index)
  questionStore.addSnapshots({
    type: 'lock',
    data: preVal
  })
}
</script>

<style scoped lang="scss">

.flex-item {
  .b-item {
    opacity: .2;
    min-width: 24px;
    height: 24px;
    display: flex !important;
  }
}

.flex-item {
  &:hover {
    .b-item {
      opacity: 1;
    }
  }
}

.active {
  color: #1890ff;
}

.b-active {
  color: white;
  opacity: 1 !important;
}
</style>
